<style scoped>
	.root {
  margin-bottom: 5px;
}
</style>

<template>
	<div class="root">
		<div>
			<slot name="button" />
			<Button type="error" :id="uploadButton">
				{{btnTxt}}
				<Icon type="ios-cloud-upload-outline" />
			</Button>
			<p style="display: inline-block;" v-if="picLists.length>0">{{uploadText}}</p>
		</div>
	</div>
</template>

<script>
	import ss from "../../../../static/simple-ajax-uploader.js";;
	const prefixCls = "civu-upload-";
	export default {
		components: {

		},
		props: {
			cusClass: {
				type: Array,
				default: function() {
					return [];
				}
			},
			url: {
				type: String,
				required: true
			},
			maxSize: {
				type: Number,
				default: 10240 //默认10M
			},
			allowExt: {
				type: Array,
				default: function() {
					return ["jpg", "jpeg", "png"];
				}
			},
			inputName: {
				type: String,
				default: "file"
			},
			customHeaders: {
				type: Object,
				default: function() {
					return {};
				}
			},
			completedTipLabel: {
				type: String,
				default: ""
			},
			defaultList: {
				type: Array
			},
			uploadButton: {
				type: String
			},
			maxUploads: {
				type: [String, Number]
			},
			customerBtn: {
				type: Boolean,
				default: false,
			},
			btnTxt: {
				type: String,
				default: '上传图片',
			}
		},
		data() {
			return {
				className: "",
				uploadText: "",
				visible: false,
				viewPath: ""
			};
		},
		mounted() {
			console.log(this.url);
			let vm = this;
			let header = "";
			// let header = vm.httpHeader();
			let uploader = new ss.SimpleUpload({
				customHeaders: header, //自定义 HTTP request headers
				customProgressHeaders: header, //自定义 HTTP request headers
				maxSize: this.maxSize, //文件最大上传大小，以KB为单位
				maxUploads: 1, //允许上传文件个数
				button: this.uploadButton, // 绑定的按钮 ID
				url: this.url, // 请求地址
				responseType: "json", // 返回类型，可参数化
				name: this.inputName, // 上传参数名，可参数化
				allowedExtensions: this.allowExt, // 允许的后缀
				onSubmit: function(filename, extension, uploadBtn, fileSize) {
					// 上传开始的回调
					vm.uploadText = ""; // 此处可自行修改，表述当前文件正在上传即可
					vm.$indicator.open({
						text: '加载中...',
						spinnerType: 'fading-circle'
					});
					vm.$emit("on-submit", filename, extension, uploadBtn, fileSize); // 监听 on-submit 事件，参数为文件名（带后缀）

				},
				/**
				 * Function to be called when an upload is manually aborted by clicking on an element that was passed to
				 */
				onAbort: function(filename, uploadBtn, fileSize) {
					vm.uploadText = "";
					vm.$indicator.close();
					vm.$emit("on-abort", filename); // 监听 on-abort 事件，参数为文件名（带后缀）
				},
				/**
				 * Function to be called if the file size exceeds the limit which is set in the maxSize option, if it is set.
				 */
				onSizeError: function(filename, fileSize) {
					vm.uploadText = "";
					vm.$indicator.close();
					vm.$emit("on-size-error", filename, fileSize); // 监听 on-size-error 事件，参数为文件名（带后缀）
				},
				/**
				 * Function to be called if the extension of a file is not permitted in the allowedExtensions option, if it is set.
				 */
				onExtError: function(filename, extension) {
					vm.uploadText = "";
					vm.$indicator.close();
					let error = vm.allowExt.join(',');
					vm.$messagebox({
						title: '提示',
						message: '请上传' + error + '结尾的文件类型',
						showCancelButton: false,
						confirmButtonText: "确认"
					})
					vm.$emit("on-ext-error", filename, extension); // 监听 on-ext-error 事件，参数为文件名（带后缀）
				},
				onComplete: function(filename, response) {
					vm.$indicator.close();
					if (!response) {
						vm.$emit("on-uncomplete"); // 监听 on-uncomplete 事件，表示发送成功了，但是 response 未正确返回（通常情况不用理会）。
						return false; // responese 异常的回调
					} else {
						vm.uploadText = filename;
						vm.$emit("on-complete", response, filename, vm.uploadButton); // 监听 on-complete 事件，参数为 response
					}
				},
				onError: function(filename, errorType) {
					// 发送失败的回调
					vm.uploadText = "";
					vm.$indicator.close();
					vm.$messagebox({
						title: '提示',
						message: '上传失败！'+errorType,
						showCancelButton: false,
						confirmButtonText: "确认"
					})
					vm.$emit("on-error", filename, errorType); // 监听 on-error 事件，参数为文件名和错误类型
				}
			});
		},
		methods: {
			handleRemove(item) {
				this.$emit("on-remove", item, this.uploadButton);
			},
			handleView(path) {
				this.visible = true;
				this.viewPath = path;
			},
			showUploadImg() {
				this.$emit("showUploadImg");
			}
		},
		computed: {
			/**
			 * 结合入参，生成按钮Class
			 */
			buttonClasses() {
				let classes = [];
				classes.push(prefixCls + "button");
				for (let i = 0; i < this.cusClass.length; i++) {
					classes.push(prefixCls + this.cusClass[i]);
				}
				return classes;
			},
			qrcode() {
				return this.code;
			},
			picLists() {
				return this.defaultList;
			}
		}
	};
</script>
